<template>
  <div ref="main" class="dashboard-container">
    <div class="top">
      <div @click="openScreen" class="screenFull" ><svg-icon class="screen_icon" icon-class='screenfull'></svg-icon></div>
      <div class="title"><span>不凡数据大屏</span></div>
      <div class="currentTime">{{time}}</div>
    </div>
    
    <!-- 左边电商数据及热门搜索词 -->
    <div class="page_left">
      <div class="shellData">
        <span class="CShellData">电商数据</span> &nbsp;
        <span style="color: #404d69" class="EShellData">Shell Data</span>
      </div>
      <div class="sales">
        <p>销售量</p>
        <p>万元</p>
      </div>
      <div class="salesNum">
        <div class="bigNum">1</div>
        <div class="bigNum">2</div>
        <div class="bigNum">0</div>
        <div class="bigNum">1</div>
        <div class="bigNum">0</div>
        <div class="bigNum">2</div>
        <div class="bigNum">8</div>
        <div class="dot">.</div>
        <div class="bigNum">4</div>
      </div>
      <div style="margin-top: 20px">完成百分比</div>
      <div class="percent">
        <div class="percentNum" style="left: 88%">88%</div>
        <div class="percentBar">
          <div class="innerBar"></div>
        </div>
        <div class="percentRow"></div>
      </div>

      <div class="hotWord">
        <span class="CShellData">热门搜索词</span> &nbsp;
        <span style="color: #404d69" class="EShellData">Top Search</span>
      </div>
      <!-- 字符云 -->
      <div style="width: 413px; height: 390px" ref="cloudBox"></div>
    </div>

    <!-- 柱状图与地图和饼状图 -->
    <div class="page_center">
      <!-- 柱状图 -->
      <div
        style="width: 795px; height: 360px; margin: 0 auto"
        ref="barBox"
      ></div>
      <div style="display: flex; justify-content: center">
        <!-- 中国地图 -->
        <div style="width: 397px; height: 360px" ref="mapBox"></div>
        <!-- 饼状图 -->
        <div style="width: 390px; height: 360px" ref="pieBox"></div>
      </div>
    </div>

    <div class="page_right">
      <span class="CShellData">统计数据</span> &nbsp;
      <span style="color: #404d69" class="EShellData">Statistics Data</span>
      <div class="data">
        <div class="data-item">
          <div class="data-img">
            <img
              src=""
              alt=""
            />
          </div>
          <div class="data-info">
            <div class="info-num">85.6</div>
            <div class="info-main">订单总数(万)</div>
          </div>
        </div>
        <div class="data-item">
          <div class="data-img">
            <img
              src=""
              alt=""
            />
          </div>
          <div class="data-info">
            <div class="info-num">32.5</div>
            <div class="info-main">销售总量(万元)</div>
          </div>
        </div>
        <div class="data-item">
          <div class="data-img">
            <img
              src=""
              alt=""
            />
          </div>
          <div class="data-info">
            <div class="info-num">92.6</div>
            <div class="info-main">人均消费</div>
          </div>
        </div>
        <div class="data-item">
          <div class="data-img">
            <img
              src=""
              alt=""
            />
          </div>
          <div class="data-info">
            <div class="info-num">45</div>
            <div class="info-main">近十分钟新增订单数量</div>
          </div>
        </div>
      </div>
      <span class="CShellData">大额订单Top</span> &nbsp;
      <span style="color: #404d69" class="EShellData">Supper Orders</span>

      <div class="tables">
        <div class="row">
          <p class="row-item">时间</p>
          <p class="row-item">物品</p>
          <p class="row-item">数量</p>
          <p class="row-item">金额</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品1</p>
          <p class="row-item">82</p>
          <p class="row-item">488263</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品2</p>
          <p class="row-item">57</p>
          <p class="row-item">56376</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品3</p>
          <p class="row-item">62</p>
          <p class="row-item">742431</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品4</p>
          <p class="row-item">98</p>
          <p class="row-item">868211</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品5</p>
          <p class="row-item">68</p>
          <p class="row-item">579776</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品6</p>
          <p class="row-item">77</p>
          <p class="row-item">315666</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品7</p>
          <p class="row-item">64</p>
          <p class="row-item">248775</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品8</p>
          <p class="row-item">65</p>
          <p class="row-item">376984</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品9</p>
          <p class="row-item">90</p>
          <p class="row-item">336281</p>
        </div>
        <div class="row">
          <p class="row-item">12-22 21:33:43</p>
          <p class="row-item">物品10</p>
          <p class="row-item">10</p>
          <p class="row-item">958742</p>
        </div>
      </div>
    </div>

    <div class="bg"><CavansBg /></div>
    

    <div style="clear: both"></div>
  </div>
</template>

<script>
import screenfull from 'screenfull';
import echarts from 'echarts'
//引入字符云
require('echarts-wordcloud')
//引入中国地图
import china from 'echarts/map/json/china.json'
import loginApi from '@/api/login'
import CavansBg from './components/cavansBg';
export default {
  components:{
    CavansBg
  },
  data() {
    return {
      time:'',
    }
  },
  name: 'Dashboard',
  computed: {},
  created() {
    //获取当前时间
    
  },
  mounted() {
    this.initCloud()
    this.initBar()
    this.initMap()
    this.initPie()

    this.isTime()
  },
  methods: {
    //字符云
    initCloud() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.cloudBox)

      // 指定图表的配置项和数据
      let datas = [
        { name: '天生要强', value: 30 },
        { name: '玛莎拉蒂', value: 28 },
        { name: '杜兰特', value: 24 },
        { name: '华为P20', value: 23 },
        { name: 'Mac Pro', value: 22 },
        { name: '小米手机', value: 21 },
        { name: '老詹', value: 20 },
        { name: '保时捷', value: 29 },
        { name: 'iPhone12', value: 28 }
      ]

      var option = {
        tooltip: {
          show: true,
          position: 'top',
          textStyle: {
            fontSize: 30
          }
        },
        series: [
          {
            type: 'wordCloud',
            // 网格大小，各项之间间距
            gridSize: 30,
            // 形状 circle 圆，cardioid  心， diamond 菱形，
            // triangle-forward 、triangle 三角，star五角星
            shape: 'circle',
            // 字体大小范围
            sizeRange: [20, 50],
            // 文字旋转角度范围
            rotationRange: [0, 90],
            // 旋转步值
            rotationStep: 45,
            // 自定义图形
            // maskImage: maskImage,
            left: 'center',
            top: 'center',
            right: null,
            bottom: null,
            // 画布宽
            width: '90%',
            // 画布高
            height: '80%',
            // 是否渲染超出画布的文字
            drawOutOfBound: false,
            textStyle: {
              normal: {
                color: function () {
                  return (
                    'rgb(' +
                    [
                      Math.round(Math.random() * 200 + 55),
                      Math.round(Math.random() * 200 + 55),
                      Math.round(Math.random() * 200 + 55)
                    ].join(',') +
                    ')'
                  )
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowColor: '#2ac'
              }
            },
            data: datas
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //柱状图
    initBar() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.barBox)

      // 指定图表的配置项和数据
      // 指定图表的配置项和数据
      var xAxisData = []
      var data1 = []
      var data2 = []
      // 模拟80条数据
      for (var i = 0; i < 80; i++) {
        xAxisData.push('date' + i)
        data1.push(Math.ceil(Math.random() * 10))
        data2.push(Math.ceil(Math.random() * 10))
      }

      var option = {
        // 标题的参数
        title: {
          text: '订单退单柱状图',
          // 标题字体样式
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal'
          }
        },
        // 两个按钮的样式
        legend: {
          // 对应 series里的 name
          data: ['订单', '退单'],
          // 距离底部
          bottom: 10,
          // 字体样式
          textStyle: {
            color: '#A8AAB3', // 坐标值得具体的颜色
            fontSize: 12
          }
        },
        // toolbox: {
        //     // y: 'bottom',
        //     // 右上角工具栏
        //     feature: {
        //         magicType: {
        //             type: ['stack', 'tiled']
        //         },
        //         dataView: {},
        //         saveAsImage: {
        //             pixelRatio: 2
        //         }
        //     }
        // },
        tooltip: {},
        xAxis: {
          data: xAxisData,
          // 网格是否显示
          splitLine: {
            show: false
          },
          // x线的样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#A8AAB3', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            // 坐标轴字体样式
            textStyle: {
              color: '#A8AAB3', // 坐标值得具体的颜色
              fontSize: 12
            }
          }
        },
        yAxis: {
          splitLine: {
            show: false
          },
          // y线的样式
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#A8AAB3', // 左边线的颜色
              width: '1' // 坐标线的宽度
            }
          },
          axisLabel: {
            // 坐标轴字体样式
            textStyle: {
              color: '#A8AAB3', // 坐标值得具体的颜色
              fontSize: 12
            }
          }
        },
        series: [
          {
            name: '订单',
            type: 'bar',
            data: data1,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#7D05E2' }, // 柱图渐变色
                  { offset: 0.5, color: '#B600FF' }, // 柱图渐变色
                  { offset: 1, color: '#BC04E2' } // 柱图渐变色
                ])
              }
            }
          },
          {
            name: '退单',
            type: 'bar',
            data: data2,
            itemStyle: {
              normal: {
                // 渐变柱状图
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#24CBFF' }, // 柱图高亮渐变色
                  { offset: 0.5, color: '#24A3FF' }, // 柱图高亮渐变色
                  { offset: 1, color: '#2492FF' } // 柱图高亮渐变色
                ])
              }
            }
          }
        ],
        // 柱子弹出来的动画样式
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5
        }
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //国家地图
    initMap() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.mapBox)

      echarts.registerMap('china', china)
      var outname = [
        '南海诸岛',
        '北京',
        '天津',
        '上海',
        '重庆',
        '河北',
        '河南',
        '云南',
        '辽宁',
        '黑龙江',
        '湖南',
        '安徽',
        '山东',
        '新疆',
        '江苏',
        '浙江',
        '江西',
        '湖北',
        '广西',
        '甘肃',
        '山西',
        '内蒙古',
        '陕西',
        '吉林',
        '福建',
        '贵州',
        '广东',
        '青海',
        '西藏',
        '四川',
        '宁夏',
        '海南',
        '台湾',
        '香港',
        '澳门'
      ]
      var outvalue = [
        0,
        524,
        13,
        140,
        75,
        13,
        83,
        11,
        19,
        15,
        69,
        260,
        39,
        4,
        31,
        104,
        36,
        1052,
        33,
        347,
        9,
        157,
        22,
        4,
        18,
        5,
        2398,
        41,
        0,
        484,
        404,
        22,
        3,
        5,
        225
      ]
      var outdata = []

      var max = 6000,
        min = 10
      var maxSize4Pin = 15,
        minSize4Pin = 8

      for (var i = 0; i < outname.length; i++) {
        outdata.push({
          name: outname[i],
          value: outvalue[i]
        })
      }

      var geoCoordMap = {}
      /*获取地图数据*/
      var mapFeatures = echarts.getMap('china').geoJson.features
      //  console.log(mapFeatures)
      mapFeatures.forEach(function (v) {
        // console.info(v)
        // 地区名称
        var name = v.properties.name
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp
      })
      var convertData = function (outdata) {
        var res = []
        for (var i = 0; i < outdata.length; i++) {
          var geoCoord = geoCoordMap[outdata[i].name]
          if (geoCoord) {
            res.push({
              name: outdata[i].name,
              value: geoCoord.concat(outdata[i].value)
            })
          }
        }
        return res
      }

      var option = {
        backgroundColor: '#0a1631',
        title: {
          text: '全国订单人数分布图',
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal'
          }
        },
        tooltip: {
          show: true,
          formatter: function (params) {
            if (params.value.length > 1) {
              return (
                '&nbsp;&nbsp;' +
                params.name +
                '&nbsp;&nbsp;&nbsp;' +
                params.value[2] +
                '人&nbsp;&nbsp;'
              )
            } else {
              return (
                '&nbsp;&nbsp;' +
                params.name +
                '&nbsp;&nbsp;&nbsp;' +
                params.value +
                '人&nbsp;&nbsp;'
              )
            }
          }
        },

        geo: {
          map: 'china',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false
            }
          },
          layoutSize: '100%',
          itemStyle: {
            normal: {
              borderColor: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: '#00F6FF'
                  },
                  {
                    offset: 1,
                    color: '#53D9FF'
                  }
                ],
                false
              ),
              borderWidth: 3,
              shadowColor: 'rgba(10,76,139,1)',
              shadowOffsetY: 0,
              shadowBlur: 60
            }
          }
        },
        series: [
          {
            type: 'map',
            map: 'china',
            aspectScale: 0.75,
            //zoom:1.1,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#073684' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#061E3D' // 100% 处的颜色
                    }
                  ]
                },
                borderColor: '#215495',
                borderWidth: 1
              },
              emphasis: {
                areaColor: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#073684' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#061E3D' // 100% 处的颜色
                    }
                  ]
                }
              }
            },
            data: outdata
          },
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            rippleEffect: {
              brushType: 'stroke'
            },
            showEffectOn: 'render',
            itemStyle: {
              normal: {
                color: {
                  type: 'radial',
                  x: 0.5,
                  y: 0.5,
                  r: 0.5,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(5,80,151,0.2)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(5,80,151,0.8)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(0,108,255,0.7)'
                    }
                  ],
                  global: false // 缺省为 false
                }
              }
            },
            label: {
              normal: {
                show: false,
                color: '#fff',
                fontWeight: 'bold',
                position: 'inside',
                formatter: function (para) {
                  return '{cnNum|' + para.data.value[2] + '}'
                },
                rich: {
                  cnNum: {
                    fontSize: 13,
                    color: '#D4EEFF'
                  }
                }
              }
            },
            symbol: 'circle',
            symbolSize: function (val) {
              if (val[2] === 0) {
                return 0
              }
              var a = (maxSize4Pin - minSize4Pin) / (max - min)
              var b = maxSize4Pin - a * max
              return a * val[2] + b * 1.2
            },
            data: convertData(outdata),
            zlevel: 1
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //饼状图
    initPie() {
      var option = {
        title: {
          text: '购买终端',
          // 标题字体样式
          textStyle: {
            color: '#9AA8D4',
            fontSize: 22,
            fontWeight: 'normal'
          }
        },
        // hover扇面时候显示的内容 b是data的name  c是data的value
        tooltip: {
          trigger: 'item',
          formatter: '{b}数量 : {c}个;占比 ({d}%)'
        },

        series: [
          {
            name: '面积模式',
            type: 'pie',
            // 最外圈和最内圈的比例大小
            radius: ['25%', '50%'],

            roseType: 'area',
            data: [
              {
                value: 25,
                name: 'Android',
                label: {
                  normal: {
                    textStyle: {
                      // 字体颜色渐变  扇颜色保持一致
                      color: '#4B4CDC',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    // 渐变饼状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#6D48DC' }, // 柱图渐变色
                      { offset: 0.5, color: '#6D48DC' }, // 柱图渐变色
                      { offset: 1, color: '#4B4CDC' } // 柱图渐变色
                    ])
                  }
                }
              },
              {
                value: 20,
                name: 'ios',
                label: {
                  normal: {
                    // 字体颜色
                    textStyle: {
                      color: '#248DFF',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#24C9FF' }, // 柱图渐变色
                      { offset: 0.5, color: '#24ABFF' }, // 柱图渐变色
                      { offset: 1, color: '#248DFF' } // 柱图渐变色
                    ])
                  }
                }
              },
              {
                value: 15,
                name: 'PC Web',
                label: {
                  normal: {
                    textStyle: {
                      color: '#BD00FF',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#D200FF' }, // 柱图渐变色
                      { offset: 0.5, color: '#BD00FF' }, // 柱图渐变色
                      { offset: 1, color: '#BD00FF' } // 柱图渐变色
                    ])
                  }
                }
              },

              {
                value: 5,
                name: 'Wap Web',
                label: {
                  normal: {
                    textStyle: {
                      color: '#70218F',
                      fontSize: 12
                    }
                  }
                },
                itemStyle: {
                  normal: {
                    // 渐变柱状图
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      { offset: 0, color: '#8A1D89' }, // 柱图渐变色
                      { offset: 0.5, color: '#7C1D8C' }, // 柱图渐变色
                      { offset: 1, color: '#70218F' } // 柱图渐变色
                    ])
                  }
                }
              }
            ]
          }
        ]
      }

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.pieBox)
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    //当前时间处理
    getTime(myDate){

      var Y = myDate.getFullYear();
      var T = myDate.getMonth()+1;
      var D = myDate.getDate();
      var H = myDate.getHours();
      var M = myDate.getMinutes();
      var S = myDate.getSeconds();
      function isCheck(val){
        if(val<10){
          return '0'+val
        }else{
          return val
        }
      }
      var times = Y+'-'+isCheck(T)+'-'+isCheck(D)+' '+isCheck(H)+':'+isCheck(M)+':'+isCheck(S)
      return times
      console.log(times);
    },
    //当前时间调用
    isTime(){
      setInterval(()=>{
        this.time = this.getTime(new Date())
      }, 1000);
    },
    //全屏设置
    openScreen(){
      if(screenfull.isEnabled){
        screenfull.toggle(this.$refs.main)
      }
    }
  }
}
</script>


<style lang="scss">
</style>

<style lang="scss" scoped>
.screenFull{
  position: absolute;
  left: 10px;
  top: 10px;
}
.screen_icon{
  width: 25px;
  height: 28px;
}
.top{
  position: relative;
}
.title {
  margin: 0 auto;
  background: url(http://shen_hao222.gitee.io/test_page/static/img/titleBG.a4cdf1b6.png);
  background-size: 100% 100%;
  background-position: 50%;
  width: 70%;
  height: 122px;
  text-align: center;
  line-height: 100px;
  font-size: 36px;
  span {
    font-size: 36px;
    color: #fff;
    text-shadow: #fff 0 0 15px;
    font-weight: 700;
  }
}
//当前时间
.currentTime{
  position: absolute;
  right: 30px;
  top: 20px;
  color: #fff;
}
.dashboard-container {
  position: relative;
  color: #9aa8d4;
  background-color: #0a1631;
  height: 937px;
}
//小标题样式
.CShellData {
  font-size: 22px;
  color: #9aa8d4;
  font-weight: 400;
}
//左边电商数据及热门搜索词
.page_left {
  width: 25%;
  position: relative;
  float: left;
  padding: 10px 0 0 10px;
  //电商数据
  .shellData {
    .CShellData {
      font-size: 22px;
      color: #9aa8d4;
      font-weight: 400;
    }
  }
  .sales {
    display: flex;
    justify-content: space-between;
  }
  .salesNum {
    display: flex;
    justify-content: space-between;
    .bigNum {
      font-size: 55px;
      font-weight: 700;
      color: #fff;
      margin-left: 3px;
      margin-right: 3px;
      box-sizing: content-box;
      width: 10%;
      text-align: center;
      background-color: #0f396b;
    }
    .dot {
      font-size: 55px;
      font-weight: 700;
      color: #fff;
      margin-left: 3px;
      margin-right: 3px;
    }
  }
  .percent {
    position: relative;
    margin: 20px auto;
    width: 85%;
    height: 50px;
    .percentNum {
      position: absolute;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      width: 45px;
      text-align: center;
      margin-left: -30px;
      transition: all 0.4s ease;
    }
    .percentBar {
      position: absolute;
      top: 65%;
      transform: translateY(-50%);
      width: 100%;
      height: 10px;
      border-radius: 5px;
      background-color: #283052;
      .innerBar {
        width: 88%;
        transition: all 0.4s ease;
        border-radius: 5px;
        height: 10px;
        background: linear-gradient(90deg, #24cbff 30%, #9000ff);
      }
    }
    .percentRow {
      left: 88%;
      transition: all 0.4s ease;
      position: absolute;
      top: 40px;
      margin-left: -10px;
      width: 0;
      height: 0;
      border-top: 0 solid transparent;
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      border-bottom: 10px solid #fff;
    }
  }
}
//柱状图与地图和饼状图
.page_center {
  width: 50%;
  position: relative;
  float: left;
  padding: 10px 0 0 10px;
}
//统计数据与订单
.page_right {
  width: 25%;
  position: relative;
  float: left;
  padding: 10px;
  .data {
    position: relative;
    width: 100%;
    height: 150px;
    margin-top: 20px;
    .data-item {
      position: relative;
      float: left;
      width: 50%;
      height: 50%;
      display: flex;
      .data-img {
        width: 35%;
        height: 100%;
        img {
          width: 80%;
        }
      }
      .data-info {
        height: 100%;
        width: 65%;
        padding-left: 15px;
        .info-num {
          font-size: 32px;
          font-weight: 700;
          color: #fff;
        }
        .info-main {
          font-size: 12px;
          color: #b0c2f9;
          margin-top: 4px;
        }
      }
    }
  }
  .tables {
    width: 100%;
    .row {
      border: 1px solid #33416b;
      font-size: 14px;
      color: #9aa8d4;
      height: 40px;
      display: flex;
      .row-item {
        width: 25%;
        height: 40px;
        text-align: center;
      }
    }
  }
}
//底部动态粒子
.bg{
  position: absolute;
  z-index: 1;
  // margin-top: -10px;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 200px;
}
</style>
